<template>
	<view>
		<view class="bg">
			<image class="image" src="../../static/img/incomeBg.png"></image>
			<view class="content">
				<view class="flex_h">
					<text class="text">可提现金额</text>
					<text class="money">80.00元</text>
				</view>
				<u-button type="primary" shape="circle" :custom-style="btn" @click="withdrawal">提现</u-button>
			</view>
		</view>
		<!-- <u-image class="image" src="../../static/img/incomeBg.png"></u-image> -->
		<!-- <u-swiper :height="500" :autoplay="false" :mode="none" :effect3d="true" :list="list"></u-swiper> -->
		<view class="white-card income">
			<view class="flex_h line">
				<text>预估收入</text>
				<text>60.00</text>
			</view>
			<view class="flex_h line">
				<text>总收益(元)</text>
				<text>60.00</text>
			</view>
			<view class="flex_h">
				<text>已提现20.00元</text>
				<u-button type="primary" shape="circle" :custom-style="customStyle" @click="handleDetail">提现明细</u-button>
			</view>
		</view>

		<view class="white-card list">
			<view class="title flex-center">
				<text class="title-text">邀请列表</text>
			</view>
			<in-come-list v-for="(item,index) in incomedata" :key="index" :incomeData="item"></in-come-list>
		</view>
	</view>
</template>

<script>
	import uImage from "@/uview-ui/components/u-image/u-image.vue";
	import uSwiper from "@/uview-ui/components/u-swiper/u-swiper.vue";
	import uButton from "@/uview-ui/components/u-button/u-button.vue";
	import InComeList from "@/pages/incomedetail/components/InComeList.vue";
	export default {
		components: {
			uImage,
			uButton,
			uSwiper,
			InComeList
		},
		data() {
			return {
				incomedata: [{
						url: '../../static/img/qq.png',
						name: '微信名称',
						time: '2020.06.03 15:03',
						money: '0.5',
						type: 1
					},
					{
						url: '../../static/img/qq.png',
						name: '微信名称2',
						time: '2020.06.03 15:03',
						money: '1',
						type: 2
					}
				],
				btn: {
					background: "#ffffff",
					color: "#80D1D3",
					fontSize: "30rpx",
					padding: "0 20rpx",
					borderRadius: "26rpx",
					width: "162rpx",
					margin: '0',
					height: '51rpx',
					lineHeight: '51rpx',
					boxShadow: '8px 7px 15px 2px rgba(168, 224, 199, 0.79)'
				},
				customStyle: {
					background: "#07D0D2",
					color: "#ffffff",
					fontSize: "30rpx",
					padding: "0 20rpx",
					borderRadius: "20rpx",
					height: '40rpx',
					lineHeight: '40rpx',
				},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}, {
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			};
		},
		methods: {
			handleDetail() {
				console.log('提现明细');
			},

			withdrawal() {
				console.log('提现');
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		height: 322rpx;
		position: relative;
		margin: 55rpx 0;

		.image {
			width: 100vw;
			height: 100%;
		}

		.content {
			top: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.text {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 30rpx;
			}

			.money {
				font-size: 56rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.income {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 159rpx;
		margin: 55rpx 20rpx;

		text:first-child {
			font-size: 24rpx;
			color: #393939;
			margin-bottom: 30rpx;
		}

		.flex_h {
			width: 30%;
			display: flex;
			align-items: center;

		}

		.line {
			border-right: 1rpx solid #E5E5E5;
		}
	}

	.list {
		margin: 0 28rpx;
		border-radius: 40rpx 40rpx 0 0;

		.title {
			border-radius: 40rpx 40rpx 0 0;
			height: 68rpx;
			justify-content: center;
			background: #08D0D2;
		}

		.list-item {
			height: 167rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 33rpx 0 72rpx;

			.flex_h {
				align-items: center;
			}

			.avatar {
				width: 74rpx !important;
				height: 74rpx !important;
			}

			text {
				font-size: 24rpx;
				color: #535353;
			}

			.tags {
				width: 119rpx;
				height: 44rpx;
				background: #E5E5E5;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #535353;
				font-size: 24rpx;
			}
		}
	}
</style>
